---
title: Altitudes
---

# Altitudes

Every component in Bumbag has the ability to set an `altitude` prop, allowing the component to have a sense of elevation. The `altitude` prop will give the component a box shadow.

```jsx-live
<Box>
  <Box altitude="100" backgroundColor="white" padding="major-2">
    <Text>Altitude 100</Text>
  </Box>
  <Box altitude="200" backgroundColor="white" padding="major-2" marginTop="major-2">
    <Text>Altitude 200</Text>
  </Box>
  <Box altitude="300" backgroundColor="white" padding="major-2" marginTop="major-2">
    <Text>Altitude 300</Text>
  </Box>
  <Box altitude="400" backgroundColor="white" padding="major-2" marginTop="major-2">
    <Text>Altitude 400</Text>
  </Box>
</Box>
```


## Theming

### Schema

```jsx
const theme = {
  altitudes: {
    100: string,
    200: string,
    300: string,
    400: string,

    [key: number]: string
  }
}
```

### Example

```jsx
const theme = {
  altitudes: {
    100: `
      shadow-opacity: 0.15;
      shadow-radius: 4px;
      shadow-color: black;
      shadow-offset: 0px 1px;
      elevation: 8;
    `,
    200: `
      shadow-opacity: 0.15;
      shadow-radius: 8px;
      shadow-color: black;
      shadow-offset: 0px 2px;
      elevation: 16;
    `,
    300: `
      shadow-opacity: 0.15;
      shadow-radius: 12px;
      shadow-color: black;
      shadow-offset: 0px 3px;
      elevation: 24;
    `,
    400: `
      shadow-opacity: 0.15;
      shadow-radius: 24px;
      shadow-color: black;
      shadow-offset: 0px 6px;
      elevation: 48;
    `,
  }
}
```
